
import { Carousel } from 'react-responsive-carousel';
import Head from 'next/head'
import { Box, Button, chakra, Heading, Text, Link} from '@chakra-ui/react';
import { css } from "@emotion/react"
import axios from 'axios'
import { baseURL } from '../axios.config'
// import { Link } from 'next/link';

// const AutoResizeInput = chakra('div', {
//   baseStyle: {
//     bg: 'papayawhip',
//     color: 'red.500',
//   }
// })

const CarouselItem = chakra('div', {
  baseStyle: {
    position: 'relative',
    div: {
      position: 'absolute',
      left: '50%',
      transform: 'translateX(-50%)',
      color: '#fff',
      marginTop: '-20%',
      marginLeft: '-30%',
      w: '100%',
      p: {
        margin: '10px 0',
        fontSize: '14px'
      }
    }
  }
})
// const box = css`
// & > div: {
//   position: 'absolute',
//   left: '50%',
//   transform: 'translateX(-50%)',
//   color: 'red',
//   paddingTop: '180px'
// }
// `
const swipperContainer = css`
  position: relative;
  & > .carousel: last-child {
    position: absolute;
    left: 0;
    bottom: 0;
    & > .thumbs-wrapper 
      > .thumbs {
      display: flex;
      justify-content: center;
    }
  }
`
export default function swipper({ data }) {
  return (
    <Box>
      <Head>
        <link rel='stylesheet' href="/css/carousel.min.css"></link>
      </Head>
      <Carousel css={swipperContainer} showArrows={false} showStatus={false} showIndicators={false}>
        {
          data.map(swiper => (
            <CarouselItem key={swiper.id}>
              <img src={swiper.url} />
              <Box>
                <Heading as='h2' size='lg'>{swiper.title}</Heading>
                <Text>{swiper.description}</Text>
                <Button colorScheme='red'>
                  <Link href={`/detail/${swiper.vid}`}>CHECK DETAIL</Link>
                </Button>
              </Box>
            </CarouselItem>
          ))
        }

      </Carousel>
    </Box>
  )
}

export function loadSwiper() {
  return axios.get('/api/swiper', { baseURL })
}
// as={`/detail/${swiper.vid}`}